<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>swiper走马灯</title>
  <link rel="stylesheet" type="text/css" href="./css/swiper.css" />
  <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/5.3.8/js/swiper.min.js" type="text/javascript" charset="utf-8">
  </script>
  <style type="text/css">
    img {
      width: 100%;
      height: 100%;
    }

    .swiper-container {
      width: 43.75rem;
      height: 10.125rem;
      margin: 0 auto;
    }

    .swiper-container-free-mode>.swiper-wrapper {
      transition-timing-function: linear;
    }
  </style>
</head>

<body>
  <div class="swiper-container" id="case4">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="img/t1.jpg"></div>
      <div class="swiper-slide"><img src="img/t2.jpg"></div>
      <div class="swiper-slide"><img src="img/t3.jpg"></div>
      <div class="swiper-slide"><img src="img/t4.jpg"></div>
      <div class="swiper-slide"><img src="img/t5.jpg"></div>
      <div class="swiper-slide"><img src="img/t6.jpg"></div>
    </div>
    <!-- 分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 滚动条 -->
    <div class="swiper-scrollbar"></div>
  </div>
  <script type="text/javascript">
    $(function () {
      var swiper = new Swiper('#case4', {
        loop: true, //允许从第一张到最后一张，或者从最后一张到第一张  循环属性
        slidesPerView: 3, // 设置显示三张
        //centeredSlides : true,     //使当前图片居中显示
        freeMode: true, // 使幻灯片滑动时不止滑动一格，且不会自动贴合 
        slidesPerGroup: 1, //定义1张图片为一组
        autoplay: true, //可选选项，自动滑动
        speed: 1000, //设置过度时间
        grabCursor: true, //鼠标样式根据浏览器不同而定 
        autoplay: {
          delay: 1,
          disableOnInteraction: false,
        },
        /*  设置每隔3000毫秒切换 */ 
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        scrollbar: {
          el: '.swiper-scrollbar',
          hide: true,
        },
      });
      /* 鼠标悬停 停止动画 */
      /* 	$('.swiper-slide').mouseenter(function () {
      	   swiper.autoplay.stop();
      	})
      	$('.swiper-slide').mouseleave(function () {
      	   swiper.autoplay.start();
      	})
       */
    });
  </script>
</body>

</html>